// styles/index.scss
// 主样式文件

// 导入变量
@use 'variables' as vars;
@use 'animations' as anims;

// 全局样式重置
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: vars.$bg-color;
  color: vars.$text-primary;
  transition: background-color 0.3s ease, color 0.3s ease;
}

// 暗色主题支持
html.dark {
  --bg-color: #1a1a1a;
  --text-primary: #ffffff;
  --text-regular: #e0e0e0;
  --text-secondary: #a0a0a0;
  --border-color: #444444;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(144, 147, 153, 0.3);
  border-radius: 4px;
  transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(144, 147, 153, 0.5);
}

// 链接样式
a {
  color: vars.$primary-color;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: vars.$primary-light;
}

// 输入框焦点样式
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: vars.$primary-color;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

// 卡片样式
.el-card {
  border-radius: vars.$border-radius;
  border: 1px solid vars.$border-color;
  box-shadow: vars.$box-shadow;
  transition: box-shadow 0.3s ease;
}

.el-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

// 按钮样式优化
.el-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

// 表格样式优化
.el-table {
  background-color: transparent;
}

.el-table .el-table__row:hover {
  background-color: rgba(64, 158, 255, 0.05);
}

// 对话框样式优化
.el-dialog {
  border-radius: vars.$border-radius;
  overflow: hidden;
}

.el-dialog__header {
  background-color: vars.$header-bg;
  border-bottom: 1px solid vars.$border-color;
  margin-bottom: var(--el-dialog-padding-primary);
}

// 抽屉样式优化
.el-drawer {
  border-radius: vars.$border-radius vars.$border-radius 0 0;
}

.el-drawer__header {
  margin-bottom: 0;
  padding: 16px 20px;
  border-bottom: 1px solid vars.$border-color;
}

// 表单内联下拉框统一宽度
.el-form--inline .el-select.form-item-width {
  width: 120px;
}

.el-form--inline .el-select.form-item-width .el-input {
  width: 100%;
}